<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: grid;
        }

        .item {
            background-color: orange;
            font-size: 2em;
            text-align: center;
            color: #fff;
            border: 1px solid #333;
        }

        .container {
            grid-template-columns: repeat(12, 45px);
            grid-template-rows: repeat(4, 70px);
            grid-template-areas: 'header header header header header header  header2 header2 header2 header2 header2 header2 '
                'main1 main1  main1  main1 main2  main2 main2 main2  main3  main3 main3  main3'
                'footer1 footer1 footer1 footer2 footer2 footer2 footer3 footer3 footer3 footer4 footer4 footer4 '
                'end1 end1 end1 end1 end1 end1 end2 end2 end2 end2 end2 end2 '
        }

        .item1 {
            grid-area: header;
            background-color: red;
        }

        .item2 {
            grid-area: header2;
            background-color: green;
        }

        .item3 {
            grid-area: main1;
            background-color: rgb(0, 128, 128);
        }

        .item4 {
            /* width: 33%; */
            grid-area: main2;
            background-color: rgb(255, 255, 0);
        }

        .item5 {
            grid-area: main3;
            background-color: rgb(255, 215, 0);
        }

        .item6 {
            grid-area: footer1;
            background-color: pink;
        }

        .item7 {
            grid-area: footer2;
            background-color: blueviolet;
        }

        .item8 {
            grid-area: footer3;
            background-color: blue;
        }

        .item9 {
            grid-area: footer4;
            background-color: black;
        }

        .item10 {
            grid-area: end1;
            background-color: red;
        }

        .item11 {
            grid-area: end2;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item item1">50%</div>
        <div class="item item2">50%</div>
        <div class="item item3">33.33%</div>
        <div class="item item4">33.33%</div>
        <div class="item item5">33.33%</div>
        <div class="item item6">25%</div>
        <div class="item item7">25%</div>
        <div class="item item8">25%</div>
        <div class="item item9">25%</div>
        <div class="item item10">50%</div>
        <div class="item item11">50%</div>

    </div>
</body>

</html>